<template>
  <div
    class="x-menu-sub-menu"
    :class="{
      'u-collapsed': collapsedMenus && collapsedMenus.indexOf(index) >= 0,
      'u-actived': activedMenu === index,
      'u-disabled': isDisabled,
    }"
  >
    <div class="u-title" @click="clickTitle">
      <span class="u-title-main">
        <slot name="title"></slot>
      </span>
      <span class="u-angle" @click.stop="clickToggle">
        <el-icon><ArrowUp /></el-icon>
      </span>
    </div>
    <div class="u-list">
      <slot :index="index"></slot>
    </div>
  </div>
</template>

<script setup name="XMenuSubMenu">
import { inject } from 'vue'

const props = defineProps({
  index: [String, Number], // 唯一id
  isDisabled: Boolean,
})

const { activedMenu, collapsedMenus, select, toggle } = inject('rootMenu', {})

function clickToggle() {
  toggle(props.index)
}
function clickTitle() {
  select(props.index)
}
</script>

<style lang="scss" scoped>
.x-menu-sub-menu {
  .u-title {
    display: flex;
    align-items: center;
    margin: 4px 0;
    padding: 0 6px;
    cursor: pointer;
    &:hover {
      background-color: var(--el-menu-hover-bg-color);
    }
    .u-title-main {
      flex: 1;
    }
    .u-angle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 6px;
      transition: background-color 0.3s;
      &:hover {
        color: var(--el-color-primary);
      }
      .el-icon {
        transition: transform 0.3s;
      }
    }
  }
  &.u-actived {
    > .u-title {
      color: var(--el-color-primary);
    }
  }
  &.u-collapsed {
    > .u-title {
      .el-icon {
        transform: rotate(180deg);
      }
    }
    .u-list {
      display: none;
    }
  }
}
</style>
